<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            border: 5px solid deepskyblue;
            border-radius: 50%;
        }
        .box i{
            display: block;
            width: 300px;
            height: 300px;
            position: absolute;
            left: -10px;
            top: -10px;
            border-radius: 50%;
            border: 10px solid transparent;
            /*旋转*/
            /*animation:circleRoate 3s  infinite;*/
            animation:circleRoate 2s;
            animation-timing-function:linear;
            
        }
        .box i span{
            position: absolute;
            left: 239px;
            top: 24px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: dodgerblue;
        }
        @keyframes circleRoate{
            from{transform: rotate(0deg);}
            /*to{transform: rotate(360deg);}*/
            to{transform: rotate(135deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <i><span></span></i>
    </div>
    <script>
        function locationPosition(num) {
            var $pen = $('#pen');
            var initDeg = -60;
            if (num > 174) {
                num = 174;
            }
            
            // 第一种，限定动画最小间隔42ms，动画时间最长2s
            var offsetDeg = num / 150 * 180;
            var sumNum = 2000 / 42; // 每42毫秒（人眼识别的最短时间）走2度需要多长时间 47.62次
            var speed = offsetDeg / sumNum;
            if (speed < 2) {
                speed = 2;
            }
            // 第二种，限定动画最小间隔100ms，动画时间2s
            // var speed = 2;
            // var perDeg = offsetDeg / 20; // 每100毫秒偏移的角度(2000/100)
            // console.log('perDeg', perDeg);
            // if (perDeg > speed) {
            //     speed = perDeg;
            // }
            var realDeg = initDeg - offsetDeg;

            var perOffestSum = 0;
            var setAnimate = null;
            //运动函数
            var fun_animat = function() {
                //运运的速度
                perOffestSum += speed;
                if (initDeg - perOffestSum < realDeg) {
                    clearInterval(setAnimate);
                    return;
                }
                //运动距离，即运动的弧度数;
                var ainhd = (initDeg - perOffestSum) * Math.PI / 180;

                //按速度来定位DIV元素
                $pen.css({
                    left: (3.72 + 1.62 * Math.sin(ainhd)) + 'rem',
                    top: (2.76 + 1.62 * Math.cos(ainhd)) + 'rem'
                });
            }
            setAnimate = setInterval(fun_animat, 42);
        }
    </script>
</body>
</html>